<template>
     <div class="slide_card_box">
      <div class="slide_card" ref="box">
        <div class="slide_item">
          <img class="img" src="../assets/image/hot1.jpeg" alt="" />
          <img class="img" src="../assets/image/hot2.jpeg" alt="" />
          <img class="img" src="../assets/image/hot3.jpeg" alt="" />
          <img class="img" src="../assets/image/hot4.jpeg" alt="" />
          <img class="img" src="../assets/image/hot5.jpeg" alt="" />
          <img class="img" src="../assets/image/hot6.jpeg" alt="" />
          <img class="img" src="../assets/image/hot7.jpeg" alt="" />
          <img class="img" src="../assets/image/hot8.jpeg" alt="" />
        </div>
      </div>
      <button v-show="leftShow" class="left" @click="gotoleft">
        <el-icon size="15" color="black">
          <ArrowLeft />
        </el-icon>
      </button>
      <button v-show="rightShow" class="right" @click="gotoright">
        <el-icon size="15" color="black">
          <ArrowRight />
        </el-icon>
      </button>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
const box = ref(null)
let tagDomObj: any = null
let newWidth = 0
let leftShow = ref(false)
let rightShow = ref(true)

onMounted(() => {
  // 获取dom节点对象
  tagDomObj = box.value;
})

const gotoleft = () => {
  rightShow.value = true
  const minWidth = 0
  newWidth = newWidth - tagDomObj.children[0].clientWidth * 9
  if (newWidth <= minWidth) {
    newWidth = minWidth
    leftShow.value = false
  }
  const newScrollstup = newWidth
  tagDomObj.style.transform = `translateX(${-newScrollstup}px)`
}

const gotoright = () => {
  leftShow.value = true
  const maxWidth = tagDomObj.clientWidth - tagDomObj.children[0].clientWidth * 2
  newWidth = newWidth + tagDomObj.children[0].clientWidth * 2
  if (newWidth >= maxWidth) {
    newWidth = maxWidth
    rightShow.value = false
  }
  const newScrollstup = newWidth
  tagDomObj.style.transform = `translateX(${-newScrollstup}px)`
}
</script>

<style lang="scss" scoped>
.img {
  width: 236px;
  height: 132px;
  margin: 10px;
}

.slide_card_box {
  width: 100%;
  height: 160px;
  overflow: hidden;
  position: relative;
}

.slide_card {
  width: 4500px;
  height: 200px;
  transition: transform 0.5s ease-out;
}

.slide_item {
  float: left;
  margin-left: 20px;
}

/* .slide_item:hover {
  box-shadow: 0px 5px 10px 0px #ccc;
  transition: transform 0.5s ease-out;
} */

.slide_card_box .left,
.slide_card_box .right {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: aqua;
  color: #000;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide_card_box .left {
  top: 50%;
  transform: translateY(-50%);
  left: 10px;
}

.slide_card_box .right {
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
}

.slide_card_box .left:hover,
.slide_card_box .right:hover {
  background: #1261ff;
}
  .el-icon {
    color: #fff;
  }

</style>